<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>合同管理管理-首页</title>
<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/index_team.css">
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
html, body {
	height: 100%;
}

body {
	overflow-y: scroll;
}

.layui-table-view .layui-table th,.layui-table-view .layui-table td {
	padding: 10px 0;
}
.select_title {
    display: inline-block;
    margin-right: 20px;
    color: #999;
}
.crm_select {
    display: inline-block;
    margin-right: 30px;
    color: #333;
    cursor: pointer;
}
.select_active {
    color: #62a8e9;
    font-weight: 600;
}
.selected{border: 1px solid #DBDBDB;color: #333;padding: 5px;}
.hide{display:none}
</style>
<body>
	<div class="kb-content layui-form" lay-filter="c">
		<section class="kb-content-container clearfix">
			<header class="nav-header">
				<h2 class="nav-section-header-title">
					<span>合同列表</span>
					<div class="f-right">
						<button class="layui-btn layui-btn-radius layui-btn-normal f-right" id="add_contract">
							<i class="layui-icon"></i>添加新合同
						</button>
					</div>
				</h2>
			</header>
			<div style="margin: 20px 20px 0 20px;border-bottom: 1px solid #e6e6e6;">
				<div class="select-progress" style="margin-right: 0px; display: block;">
					<div style="margin-bottom: 20px;">
						<span class="select_title">来源：</span>
						<span class="crm_select ">线上</span>
						<span class="crm_select ">中介</span>
						<span class="crm_select ">社交网络</span>
						<span class="crm_select ">推荐</span>
					</div>
				</div>
				<div class="select-progress" style="margin-right: 0px; display: block;">
					<div style="margin-bottom: 20px;">
						<span class="select_title">状态：</span>
						<span class="crm_select ">已签</span>
						<span class="crm_select ">快到期</span>
						<span class="crm_select ">已结束</span>
					</div>
				</div>
				<div class="select-progress" style="margin-right: 0px; display: block;">
					<div style="margin-bottom: 20px;">
						<span class="select_title">日期：</span>
						<span class="crm_select " style="width:200px"><input name="date" type="text" class="layui-input" id="date"  placeholder=" - "></span>
					</div>
				</div>
			</div>
			<div  style="margin:20px 20px 0 20px; display: none;" id="keyword">
					<div>
						<span class="select_title">条件：</span>
						<span class="selected hide"><span  style="display: inline-block; margin-right: 10px;"></span> <i class="layui-icon del">&#x1006;</i></span>
						<span class="selected hide"><span  style="display: inline-block; margin-right: 10px;"></span> <i class="layui-icon del">&#x1006;</i></span>
						<span class="selected hide">创建日期：<span  style="display: inline-block; margin-right: 10px;"></span> <i class="layui-icon del">&#x1006;</i></span>
						<span style="padding-left:15px;cursor: pointer;" onclick ="reomveAllword()"><i class="layui-icon">&#xe640;</i>清空</span>
					</div>
				</div>
			<div class="layui-tab-content " id="teamList">
				<table class="layui-hide" id="LAY_table_contract" lay-filter="contract"></table>

			</div>
		</section>
	</div>
</body>
<script>
	var table;
	var laydate;
	var laiyuan = null;
	var state = null;
	var startDate = null;
	var enddate = null;
	var form;
	$(function() {

		layui
				.use(
						[ 'element', 'table', 'layer','laydate','form' ],
						function() {
							var element = layui.element;
							table = layui.table;
							laydate = layui.laydate;
							form = layui.form;
							element.on('tab(docNavTabBrief)', function() {
								var target = $(this), index = $(this).index();

							});
							//日期范围选择
							laydate.render({ 
							  elem: '#date'
							  ,range: '~' //range: true 或 range: '~' 来自定义分割字符
							  ,done: function(value, date, endDate){
								  var d = value.split(" ~ ");
								  startDate = d[0];
								  enddate = d[1];
								  tableRead();
								    showKeywords(value,2);
								  }
							});
							//方法级渲染
							table
									.render({
										id : 'contract',
										elem : '#LAY_table_contract',
										url : '/app/contractInfo/listdata',
										where : {
											params : {
												state:0
											}
										},
										cols : [ [
												{
													field : 'company',
													title : '公司名称',
													templet : function(d) {
														if (d.team
																&& d.team.fullName) {
															return d.team.fullName;
														} else {
															return "无"
														}
													}
												},
												{
													field : 'customer',
													title : '客户名称',
													templet : function(d) {
														if (d.customer
																&& d.customer.customerName) {
															return d.customer.customerName;
														} else {
															return "无"
														}
													}
												},
												{
													field : 'contractNumber',
													title : '合同编号'
												},
												{
													field : 'status',
													title : '状态',
													align:'center',
													templet : function(d) {
														if (d.state == 0) {
															return '<span style="background:#73bb4b;color:#fff;display:inline-block;padding:0 15px;" data-id ="'+d.id+'">已签</span>';
														} else if (d.state == 1) {
															return '<span style="background:#ffdfdf;color:#dd5a55;display:inline-block;padding:0 15px;"  data-id ="'+d.id+'">已结束</span>';
														} else {
															return '<span style="background:#73bb4b;color:#fff;display:inline-block;padding:0 15px;"  data-id ="'+d.id+'">快到期</span>';
														}
													}
												}, {
													field : 'startDate',
													title : '开始日期',
													align:'center'
												}, {
													field : 'realEndDate',
													title : '结束日期',
													align:'center'
												} ] ],
										page : true,
										done : function() {
											setHeight()
										}
									});
							tableBtnOpt();
							
							
						});
		$("#add_contract").on("click", function() {
			//var projectId = $("#projectId").val();
			parent.parent.layer.open({
				type : 2,
				title : "选择团队",
				area : [ '600px', '250px' ],
				shade : [ 0.6, '#000' ],
				zIndex : 800,
				content : "/app/customerTeam/chooseTeam/all"

			});
		})
		
		//筛选条件
		$(".crm_select").on("click",function(){
			$(this).addClass("select_active").siblings().removeClass("select_active");
			var index = $(".select-progress").index($(this).parent().parent());
			showKeywords($(this).text(),index);
			if(index == 0){
				laiyuan = $(this).index()-1;
			}else{
				state = $(this).index()-1;
			}
			 tableRead();
		})
		//清除某个筛选条件
		$(".del").on("click",function(){
			$(this).parent().addClass("hide");
			var index = $(".selected").index($(this).parent());
			$(".select-progress").eq(index).find(".crm_select").removeClass("select_active");
			if(index == 0){
				laiyuan = null;
			}else if(index == 1){
				state = null;
			}else{
				startDate = null;
				enddate = null;
				$("input[name='date']").val('');
			}
			if($(".hide").length == 3){
				$("#keyword").hide();
			}
			tableRead();
		})
	})
	//清空所有筛选条件
	function reomveAllword(){
		laiyuan = null;
		state = null;
		startDate = null;
		enddate = null;
		$("#keyword").hide();
		$(".selected").addClass("hide");
		$("input[name='date']").val('');
		$(".crm_select").removeClass("select_active");
		tableRead();
	}
	
	//展示查询条件
	function showKeywords(value,index){
		$("#keyword").show();
		$(".selected").eq(index).removeClass("hide").find("span").text(value);
	}
	function tiaozhuan(id) {
		console.log("tz");
		var iframeSrc = '/app/contractInfo/detailCenter/' + id;
		var iframe = window.parent.document.getElementById('iframe-top');
		iframe.src = iframeSrc;
		/* iframe.width = '100%';
		iframe.height = '100%';
		iframe.id = 'project-iframe'; */
		//parent.parent.$(".iframe-wrap").html($(iframe));
	}
	function tableBtnOpt() {
		var $mylist = $("#LAY_table_contract").next('.layui-table-view').find(
				'.layui-table-body table.layui-table');
		/*  点击tr元素,跳转详情基于table*/
		$mylist.on("click", 'tr', function() {
			var targetI = $(this);
			var id = $(targetI).children('td').find("span[data-id]").attr(
					"data-id");
			tiaozhuan(id);
			return false;
		});
	}

	/* 阻止事件冒泡 */
	function preventBubble(event) { //取消事件冒泡
		var e = arguments.callee.caller.arguments[0] || event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
		if (e && e.stopPropagation) {
			e.stopPropagation();
		} else if (event) {
			event.cancelBubble = true;
		}
	}
	/* 根据iframe的内容撑开iframe的容器 */
	function setHeight() {
		/*  var h = document.body.offsetHeight*1;
		 window.parent.parentHeight(h); */
	}
	//表单重载
	function tableRead(){
		table.reload('contract', {
			  where: { //设定异步数据接口的额外参数，任意设
				  params : {
					  laiyuan:laiyuan,
					  state:state,
					  startDate:startDate,
					  enddate:enddate
					}
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			});
		tableBtnOpt();
	}
</script>
</html>